{% extends "base/base.html" %}
{% load staticfiles %}
{% load leaflet_tags %}

{% block content %}
<div class="row">
    <div class="col-6">
        {% leaflet_map "mainmap" callback="window.map_init_basic" %}
    </div>
    <div class="col-6">
        <div id="title" class="text-center">
            <h3>{{ story.title }}</h3>
            <small>by <a href="{% url 'user:profile' story.user %}">{{ story.user }}</a></small>
            <p><b>{{ story.event.start_date|date }} - {{ story.event.finish_date|date }}</b></p>
        </div>
        <div id="text">{{ story.text|safe }}</div>
    </div>
</div>
{% endblock %}

{% block css %}
    {% leaflet_css plugins='elevation' %}
    <link href="{% static 'css/story-viewer.css' %}" rel="stylesheet" media="screen">
{% endblock %}

{% block js %}
    {% leaflet_js plugins='elevation' %}
    <script>
        var track_id = {{ story.track.id|default:0 }};
        var url_track_json = "{% url 'track:json' story.track.id|default:0 %}";
    </script>
    <script src="{% static 'js/story-viewer.js' %}"></script>
{% endblock %}
